<template>
	<div class="app-container">
		<el-form ref="queryParams" :model="queryParams" :inline="true" label-width="80px">
			<el-form-item label="活动编号">
				<el-input v-model="queryParams.activityCode" placeholder="请输入活动编号" clearable style="width: 240px"
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item label="活动分类">
				<el-select v-model="queryParams.activityClassification" clearable>
					<el-option v-for="i in activityOptions" :key="i.createTime" :value="i.dictValue"
						:label="i.dictLabel"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="活动名称">
				<el-input v-model="queryParams.activityName" placeholder="请输入活动名称" clearable style="width: 240px"
					@keyup.enter.native="handleQuery" />
			</el-form-item>
			<el-form-item>
				<el-button type="primary" icon="el-icon-search" size="mini" @click="serachFn">搜索</el-button>
				<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
			</el-form-item>
		</el-form>
		<el-row :gutter="10" class="mb8">

			<el-col :span="1.5">
				<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
					v-hasPermi="['system:dict:add']">新增</el-button>
			</el-col>
		</el-row>
		<el-table v-loading="loading" :data="list" v-if="list.length>0">
			<el-table-column label="活动创建时间" prop="createTime"></el-table-column>
			<el-table-column label="活动编号" prop="activityCode"></el-table-column>
			<el-table-column prop="areaName" label="活动分类">
				<template slot-scope="scope">
					<span>{{activityClassName(scope.row.activityClassification)}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="activityName" label="活动名称"> </el-table-column>
			<el-table-column prop="activeDescribe" label="申报描述">
			</el-table-column>
			<el-table-column prop="rewardPoints" label="申报积分"> </el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
						v-hasPermi="['system:user:edit']">修改</el-button>
					<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
						v-hasPermi="['system:dict:remove']">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<pagination v-show="total > 0" :total="total" :page.sync="queryParams.params.pageNum"
			:limit.sync="queryParams.params.pageSize" @pagination="handleQuery" />
		<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
			<el-form ref="form" :model="form" :rules="rules" label-width="80px">
				<el-form-item label="活动编号" prop="activityCode">
					<el-input v-model="form.activityCode" placeholder="请输入活动编号" :disabled="form.createTime?true:false"/>
				</el-form-item>
				<el-form-item label="活动分类" prop="activityClassification">
					<el-select v-model="form.activityClassification" clearable>
						<el-option v-for="i in activityOptions" :key="i.createTime" :value="i.dictValue"
							:label="i.dictLabel"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="活动名称" prop="activityName">
					<el-input v-model="form.activityName" placeholder="请输入活动名称" />
				</el-form-item>
				<el-form-item label="申报描述" prop="activeDescribe">
					<el-input v-model="form.activeDescribe" placeholder="请输入申报描述" type="textarea" maxlength="100"
						show-word-limit />
				</el-form-item>
				<el-form-item label="申报积分" prop="rewardPoints">
					<el-input v-model="form.rewardPoints" placeholder="请输入申报积分" type="number" max="1000" />
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitForm">确 定</el-button>
				<el-button @click="cancel">取 消</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {
		addActivityApi,
		putActivityApi,
		delActivityApi,
		getActivityApi,
	} from "@/api/party/activity";
	import {
		listData
	} from "@/api/system/dict/data";
	export default {
		data() {
			var checkPoints = (rule, value, callback) => {
				if (/^[1-9]\d*$/.test(value)) {
					callback();
				} else {
					return callback(new Error("积分必须大于0且为整数！"));
				}
			};
			return {
				activityOptions: [],
				title: "",
				open: false,
				loading: false,
				list: [],
				queryParams: {
					activityClassification: "",
					activityCode: "",
					activityName: "",
					params: {
						pageNum: 1,
						pageSize: 10
					},
				},
				total: 0,
				form: {
					activityCode: "",
					activityClassification: "",
					activityName: "",
					activeDescribe: "",
					rewardPoints: "",
				},
				rules: {
					activityCode: [{
						required: true,
						message: "活动编号不能为空",
						trigger: "blur"
					}, ],
					activityClassification: [{
						required: true,
						message: "请选择活动分类",
						trigger: "blur"
					}, ],
					activityName: [{
						required: true,
						message: "请输入活动名称",
						trigger: "blur"
					}, ],
					activeDescribe: [{
						required: true,
						message: "请输入申报描述",
						trigger: "blur"
					}, ],
					rewardPoints: [{
							required: true,
							message: "请输入活动积分",
							trigger: "blur"
						},
						{
							validator: checkPoints,
							trigger: "blur"
						},
					],
				},
			};
		},
		computed: {
			activityClassName() {
				return (activityClassification) => {
					let dictLabel = "";
					if (this.activityOptions.length == 0) return dictLabel;
					this.activityOptions.forEach((item) => {
						if (item.dictValue == activityClassification) {
							dictLabel = item.dictLabel;
						}
					})
					return dictLabel;
				}
			}
		},
		async created() {
			await this.listDataFn();
			await this.handleQuery();
		},
		methods: {
			//获取活动分类
			listDataFn() {
				listData({
					dictType: "activity_classification",
				}).then((res) => {
					this.activityOptions = res.rows;
				});
			},
			handleDelete(row) {
				this.$modal
					.confirm('是否确认删除"' + row.activityName + '"的数据项？')
					.then(function() {
						return delActivityApi(row.activityCode);
					})
					.then(() => {
						this.handleQuery();
						this.$modal.msgSuccess("删除成功");
					})
					.catch(() => {});
			},
			handleQuery() {
				this.loading = true;
				getActivityApi(this.queryParams).then((response) => {
					this.total = response.total;
					this.list = response.rows;
				}).finally(() => {
					this.loading = false;
				});
			},
			serachFn() {
				this.queryParams.params.pageNum = 1;
				this.handleQuery();
			},
			resetQuery() {
				this.queryParams = {
					activityClassification: "",
					activityCode: "",
					activityName: "",
					params: {
						pageNum: 1,
						pageSize: 10
					},
				};
				this.handleQuery();
			},
			async handleUpdate(row) {
				this.form = row
				// this.$set(this.form, "postIds", response.postIds);
				// this.$set(this.form, "positionLevel", row.positionLevel);
				// this.$set(this.form, "belongToArea", response.data.belongToArea);
				// this.$set(this.form, "roleIds", response.roleIds);
				this.open = true;
				this.title = "修改用户";
			},
			handleAdd() {
				this.form = {
					activityCode: "",
					activityClassification: "",
					activityName: "",
					activeDescribe: "",
					rewardPoints: "",
				};
				this.open = true;
				this.title = "新增活动";
				this.listDataFn();
			},
			submitForm() {
				this.$refs["form"].validate((valid) => {
					if (valid) {
						if (this.form.createTime) {
							putActivityApi(this.form).then((res) => {
								this.$modal.msgSuccess("修改成功");
								this.open = false;
								this.handleQuery();
							});
						} else {
							addActivityApi(this.form).then((res) => {
								this.$modal.msgSuccess("新增成功");
								this.open = false;
								this.handleQuery();
							});
						}
					}
				});
			},
			cancel() {
				this.resetForm("queryParams");
				this.open = false;
			},
		},
	};
</script>

<style lang="scss" scped>
	.el-select {
		width: 100%;
	}

	.el-textarea .el-input__count {
		bottom: -18px;
	}
</style>